<template>
  <div class="video-aside-main">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>热门视频</span>
        </div>
      </template>
      <div v-for="(item, index) in topList" :key="item.id" class="text item">
        <span class="number">{{ index + 1 }}</span>
        <span class="aside-contain">
          <span @click="getTop(item.id)"
            ><a href="#">{{ textSplice(item.videoTitle) }}</a></span
          >
        </span>
      </div>
    </el-card>
  </div>
</template>

<script>
import VideoApi from '@/api/core/VideoList.js'
export default {
  name: 'VideoAside',
  data() {
    return {
      topList: [],
    }
  },

  created() {
    this.getVideoTop10()
  },

  methods: {
    //获取视频前10
    getVideoTop10() {
      VideoApi.getVideoTop10()
        .then((response) => {
          this.topList = response.data.sidebar_top10
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },

    //前往视频详情页
    getTop(id) {
      console.log(id)
      this.$router.push('/videoDetail/' + id)
    },

    //格式化标题文字
    textSplice(text) {
      if (text.length < 16) {
        return text
      }

      return text.substring(0, 16) + '..'
    },
  },
}
</script>

<style scope>
.aside-contain :hover {
  text-shadow: 10px 5px 5px #409eff;
}
.video-aside-main {
  border-radius: 10px;
  width: 290px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.number {
  background-color: #409eff;
  border: 1px solid #efefef;
  border-radius: 8px;
  color: white;
  font-size: 18px;
  padding: 1px;
}
.text {
  font-size: 18px;
}

.item {
  height: 45px;
  padding: 10px 0;
}
.box-card {
  height: 730px;
  width: 290px;
  border-radius: 8px;
  position: relative;
}
.text .aside-contain {
  font-size: 15px;
}

a {
  text-decoration: none;
  color: #231f24;
}
</style>
